/** @method PopValue
 *  @description 基于tab弹窗的选择器
 **/
import React, { useEffect, useState } from 'react';
import PopTab from '../PopTab';
import LabelInput from '../LabelInput';
import { Select } from 'antd';
import { VARIABLE_TYPE } from 'src/utils/constant';
import { findVariableName, getVariableName } from 'src/utils/variable';
import useLimitData from '../../hook/useLimitData';
import { cloneDeep } from 'lodash';
import DataTypeDesc from 'src/components/DataTypeDesc';
import './index.less';

export default function PopValue(props) {
  const [var_name, setVarName] = useState('');
  const [leftDataType, setLeftDataType] = useState('');
  console.log(props);
  useEffect(() => {
    // 左变量为字段时加tips
    if (props.isLeft && props.value && props.value.var_type === VARIABLE_TYPE._FIELD) {
      if (props.value.data_type) {
        setLeftDataType(props.value.data_type);
      } else {
        const data =
          props.variable[VARIABLE_TYPE._FIELD] &&
          props.variable[VARIABLE_TYPE._FIELD].find((item) => item.code === props.value.var_code);
        setLeftDataType(data ? data.data_type : '');
      }
    }
    //编辑时 通过详情的using_variable回填变量的name value改变时还是用全局的variable查找name
    if (props.using_variables && props.using_variables.length) {
      if (props.value) {
        const { var_code } = props.value;
        const isDetailCode = props.using_variables.find((item) => item.code === var_code);
        if (isDetailCode) {
          const var_name = getVariableName(var_code, props.using_variables);
          setVarName(var_name);
          return;
        }
      }
    }
    const var_name = findVariableName(
      (props.value && props.value.var_type) || props.type,
      props.value && props.value.var_code,
      props.variable,
    );
    setVarName(var_name);
  }, [cloneDeep(props.value)]);

  const callback = (data, type) => {
    if (props.isLeft && data.var_type === VARIABLE_TYPE._FIELD) {
      setLeftDataType(data.data_type);
    } else {
      setLeftDataType('');
    }
    props.onChange && props.onChange(data, type);
  };

  const handleSelectChange = (value) => {
    const _value = {
      var_code: value,
      var_name: variable[0].content.find((item) => item.code === value).name,
      var_type: variable[0].name,
    };
    props.onChange && props.onChange(_value);
  };
  const variable = props.variable
    ? useLimitData(
        props.variable,
        props.limitType,
        props.dataType,
        {
          strategyId: props.strategyId,
          fieldId: props.fieldId,
        },
        props.leftVar,
      )
    : [];
  if (props.fieldClass) {
    variable.forEach((item) => {
      if (item.key === VARIABLE_TYPE._FIELD) {
        item.content = item.content.filter((it) => it.classification === props.fieldClass);
      }
    });
  }
  const finnalyVariable = props.except ? variable.filter((item) => !props.except.includes(item.key)) : variable;
  const isSingleSelect =
    variable.length === 1 && [VARIABLE_TYPE._RISK_LEVEL, VARIABLE_TYPE._NAMELIST].includes(variable[0].name);
  return (
    <>
      {isSingleSelect ? (
        variable[0].name === VARIABLE_TYPE._RISK_LEVEL ? (
          <Select
            style={props.style}
            value={props.value ? (props.isImportant ? props.value.var_name : props.value.var_code) : ''}
            onChange={handleSelectChange}
            disabled={props.disabled}
          >
            {variable[0].content.map((item) => {
              return (
                <Select.Option value={item.code} key={item.code}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        ) : (
          <PopTab // 名单配置
            {...props}
            onSetValue={callback}
            variable={variable}
            value={props.value ? props.value.var_code : ''}
            event_id={props.event_id}
            type={props.type}
            disabled={props.disabled}
          >
            <LabelInput
              {...props}
              {...{
                ...props.value,
                var_name,
              }}
              isInput={true}
              isTxt={props.isTxt || false}
              placeholder={props.placeholder}
              disabled={props.disabled}
              style={props.style}
              onChange={() => {}}
            />
          </PopTab>
        )
      ) : (
        <PopTab
          {...props}
          onSetValue={callback}
          variable={finnalyVariable.filter(
            (item) => item.name !== VARIABLE_TYPE._RISK_LEVEL && item.name !== VARIABLE_TYPE._NAMELIST,
          )}
          value={props.value ? props.value.var_code : ''}
          type={props.type}
          disabled={props.disabled}
        >
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <div style={{ flex: 1 }}>
              <LabelInput
                {...props}
                {...{
                  ...props.value,
                  var_name,
                }}
                isInput={true}
                isTxt={props.isTxt || false}
                placeholder={props.placeholder}
                disabled={props.disabled}
                style={props.style}
                onChange={() => {}}
              />
            </div>
            {/* 字段类型tips */}
            {leftDataType && (
              <span style={{ flexShrink: 0 }}>
                <DataTypeDesc dataType={leftDataType} />
              </span>
            )}
          </div>
        </PopTab>
      )}
    </>
  );
}
